<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="navbar.jsp" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'new_project.jsp' starting page</title>
	<link rel="stylesheet" type="text/css" href="styles/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="styles/js/select2/select2.css" />
	<script type="text/javascript" src="styles/jquery/jquery.js"></script>
	<script type="text/javascript" src="styles/js/select2/select2.min.js"></script>
  </head>
  
  <body class="body">
    <div class="container" style="margin-top:60px;width:960px;margin-left:auto;margin-right:auto;">

	  <div class="row">

		<div class="span9">

			<form id="form" class="form-horizontal" action="pms.jspx?m=new_project" method="post" >

        <fieldset>&nbsp; 
 
          <legend>开始一个新项目</legend>

          <div class="control-group">

            <label class="control-label" for="input01">项目名称</label>

            <div class="controls" >

              <input type="text" name="projectname" class="span5" id="projectName" x-webkit-speech="undefined" style="height:30px"/><br />
           	  <span id="span1" style="color:red;"></span>

              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>

            </div> 

          </div>
 
          <div class="control-group">

            <label class="control-label" for="input01">项目描述</label>

            <div class="controls">

              <textarea name="desc" id="desc" class="span5" rows="4"></textarea><br />
           	  <span id="span2" style="color:red;"></span>

            </div>

          </div>

          <div class="control-group">

            <label class="control-label" for="multiSelect">负责人</label>

            <div class="controls">

              <select name="manager" class="multiSelect" style="width:200px">

                <c:forEach items="${userlist}" var="user">
                	<option value="${user.userId }">${user.userName }</option>
                </c:forEach>

              </select>

            </div>

          </div>

         <div class="control-group">

            <label class="control-label" for="input01" >项目成员</label>

            <div class="controls" >
				<select name="worker" id="worker" multiple class="multiSelect" style="width:400px">

                <c:forEach items="${userlist}" var="user">
                	<option value="${user.userId }">${user.userName }</option>
                </c:forEach>

              </select>
              

            </div>

          </div>

          
			<input type="hidden" name="workers" id="workers"/>
          <div class="form-actions">

            <button type="button" id="btnSave" class="btn btn-primary">保存</button><!--

            <button class="btn" ></button>
          	 --><a href="main.jspx" class="btn">返回</a>

          </div>

        </fieldset>

      </form>          

          	

		</div>

		<div class="span3">

			

		</div>

	  </div>

	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".multiSelect").select2();
			$("#btnSave").click(function(){
				var v=$("#worker").select2("val");
				$("#workers").val(v);
				
				var projectName = $("#projectName").val();
				if(projectName.trim().length == 0){
					$("#span1").html("项目名称不能为空！");
					$("#projectName").focus();
					return;
					
				} else if(projectName.length > 10){
					$("#span1").html("项目名称长度不能大于10");
					$("#projectName").focus();
					return;										
				}
				
				
				var desc = $("#desc").val();
				if(desc.trim().length == 0){
					$("#span2").html("项目描述不能为空！");
					$("#desc").focus();
					return;
				} else if(desc.length > 800){
					$("#span2").html("项目描述长度不能大于800个字！");
					$("desc").focus();
					return;
				}
				$("#form").submit();
			});
		});
	
	</script>

  </body>
</html>
